<template >

    <div style="background-color: honeydew;height:100%">
        <el-container>
            <el-header class="homeHeader">
               <h2>博客管理平台</h2>
                <el-dropdown @command="dropdownMethod">
                <span class="el-dropdown-link">
                  {{returnUser.nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="hideAside" @click.native="chan">{{this.change}}</el-dropdown-item>
                        <el-dropdown-item>个人主页</el-dropdown-item>
                        <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-container>

                <el-aside v-show="asideShow" width="200px" style=" border-radius: 15px;margin-top: 20px">
                    <div style="border-radius: 15px;">
                    <el-menu class="el-menu-vertical-demo" router>
                        <el-submenu :index="i+''"v-for="(item,i) in this.$router.options.routes" v-if="!item.hidden && item.meta.secMenu&& roleEnable(item.meta.roles)"style="background-color:lavenderblush">
                            <template slot="title">
                                <i :class="item.meta.icon"></i>
                                <span>{{item.meta.title}}</span>
                            </template>

                            <el-menu-item :index="child.path" v-for="(child,i) in item.children" style="background-color:mistyrose" v-if="!child.hidden">
                                {{child.meta.title}}
                            </el-menu-item>

                        </el-submenu>

                        <div v-for="(item,i) in this.$router.options.routes" v-if="!item.hidden && !item.meta.secMenu" style="background-color:lavenderblush;">
                        <el-menu-item :index="child.path" v-for="(child,i) in item.children" v-if="!child.hidden && roleEnable(child.meta.roles)">
                                <i :class="child.meta.icon"></i>
                                <span slot="title">{{child.meta.title}}</span>

                        </el-menu-item>
                        </div>
                    </el-menu>
                    </div>
                </el-aside>

                <el-main>
                    <el-breadcrumb separator-class="el-icon-arrow-right" class="bread">
                        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{this.$route.meta.title}}</el-breadcrumb-item>

                    </el-breadcrumb>
                    <router-view :key="$route.fullPath"/><!--//切换路由 -->

                </el-main>
            </el-container>
        </el-container>

    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
            return{
                change:"隐藏菜单",
                asideShow : true,
               // currUser:JSON.parse(window.sessionStorage.getItem('loginU'))//json. parse将字符串装换成json
            }
        },methods:{
            dropdownMethod(command) {
                if (command == 'hideAside') {
                    this.asideShow = !this.asideShow;
                }
                else if (command == 'logout') {
                    this.$confirm('确定要退出系统?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 用户退出
                        this.getRequest('/logout').then(resp => {
                            if (resp) {
                                window.sessionStorage.removeItem('loginU');
                                this.$router.replace('/');
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消退出'
                        });
                    });
                }

            },
            chan(){
                if(this.change=="显示菜单"){
                    this.change="隐藏菜单";
                }
                else if(this.change=="隐藏菜单"){
                    this.change="显示菜单";
                }
            },
            // 判断用户是否有该角色，显示对应菜单
            roleEnable(roles) {
                let bool = false;
                let userRoles = this.returnUser.authorities;
                userRoles.forEach((item,i) => {
                    let authority = item.authority;
                    for (let j in roles) {
                        if (authority == roles[j]) {
                            bool = true;
                        }
                    }
                })
                return bool;
            },
        }
        ,
        computed : {
            returnUser() {
                return JSON.parse(window.sessionStorage.getItem("loginU"));
            }
        }

    }
</script>

<style scoped>

    .homeHeader{
        background: deepskyblue;
        color: white;
        display: flex;
        /*垂直居中*/
        align-items: center;
        /*间距*/
        justify-content: space-between;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: white;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .bread{
        margin-bottom: 10px;
    }
</style>